<template>
    <view class="container">
        <view class="resources" @click="toHouseDetailPage">
            <image :src="'https://sy-k.cn'+data.room_img" mode=""></image>
            <view class="heart" @tap.stop="addOrDelFav">
                <u-icon :name="icon" color="#fa3534" size="32"></u-icon>
            </view>
            <view class="price">
                <text>{{data.lease_priec}}元/月</text>
            </view>
            <view class="information">
                <text>{{data.s_name}}-{{data.building}}栋{{data.unit}}单元{{data.room_num}}-朝{{data.orientation}}-{{data.area}}平</text>
            </view>
            <view class="position">
                位于 {{data.s_address}} 附近
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "WishItem",
        props:{
            data:{
                type: Object,
                default: {}
            }
        },
        data(){
            return {
                icon: 'heart-fill',
            }
        },
        methods:{
            toHouseDetailPage(){
                uni.navigateTo({url: '/pages/user/index/detail'})
            },
            addOrDelFav(){
                let data = {
                    u_id: uni.getStorageSync('u_id'),
                    h_id: this.data.id
                };
                let icon = '';
                if (this.icon === 'heart-fill'){
                    icon = 'heart';
                    data.type = 2;
                } else{
                    icon = 'heart-fill';
                    data.type = 1;
                }
                uni.$u.http.post('/api.php/UserClinet/house_wish', data).then(res => {
                    this.icon = 'icon';
                })
            },

        }
    }
</script>
<style lang="scss" scoped>
    .container {
        .resources {
            width: 100%;
            height: 40%;
            margin-top: 50rpx;
            position: relative;

            .heart{
                position: absolute;
                right: 30rpx;
                top: 30rpx;
            }

            image {
                width: 100%;
                margin-bottom: 10rpx;
            }
            .price{
                display: inline-block;
                width: 100%;
                height: 40rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text {
                    color: #f17d30;
                    margin-right: 20rpx;
                }
            }

            .position{
                font-size: 12px;
                color: #9c9c9c;
                margin-top: 10rpx;
            }
        }
    }
</style>
